<template>
  <div :class="`ext-style-setting-main ${visualThemeClassName}`">
    <table
      class="main_table"
    >
      <thead>
        <tr>
          <th width="40">{{ $demoi18n('word.serialNumber') }}</th>
          <th>{{ $demoi18n('word.configurableItems') }}</th>
          <th>{{ $demoi18n('word.enabled') }}</th>
          <th>{{ $demoi18n('word.configuringSubitems') }}</th>
          <th width="40">
            <el-button
              :link="true"
              type="primary"
              icon="Plus"
              size="default"
              @click="addStylesItem"
            ></el-button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(n, i) in extStyles"
          :key="n._randKey"
        >
          <!-- 序号 -->
          <td>{{ i + 1 }}</td>

          <!-- 可配置项 -->
          <td>
            <div class="selector_box">
              <ValueInputer
                v-model:value="n.extStyleOption"
                value-type="List"
                :enum-values="extStyleOptions_"
                required
                :rules="rules"
              />
              <NodePicker v-if="n.extStyleOption === 'diy'" :cssPath="n.elSelector" @on-select="handleSelectEl($event, n)" />
            </div>

            <!-- 选择元素 -->
            <div v-if="n.extStyleOption === 'diy'" class="selector_input">
              <ValueInputer v-model:value="n.elSelector" :max="300" valueType="Textarea" :rules="getCssPathRules()" />
            </div>

          </td>

          <!-- 开关 -->
          <td>
            <div>
              <el-switch
                v-model="n.switch"
                size="default"
                class="enabled_switch"
              ></el-switch>
            </div>
            <div v-if="n.switch" class="switch_box">
              <ValueInputer
                v-model:value="n.condition"
                placeholder="{{comp.xx=='ok'}}"
              />
              <Helptip>{{ $demoi18n('ext-style-setting.conditionTip') }}</Helptip>
            </div>
          </td>

          <!-- 配置子项 -->
          <td>
            <table
              class="configuringSubitems_table"
            >
              <tr>
                <th width="200">{{ $demoi18n('word.configuringSubitems') }}</th>
                <th width="300">{{ $demoi18n('word.value') }}</th>
                <th width="20">
                  <el-button
                    :link="true"
                    type="primary"
                    icon="Plus"
                    size="default"
                    @click="addStyle(n)"
                  ></el-button>
                </th>
              </tr>
              <tr
                v-for="(s, i1) in n.styles"
                :key="s._randKey"
              >
                <td>
                  <ValueInputer
                    v-model:value="s.type"
                    value-type="List"
                    :enum-values="typeOptions"
                    required
                  />
                </td>
                <td>
                  <CssStyleEditorItem v-model="s.value" :cssKey="camelCase(s.type)" />
                </td>
                <td>
                  <el-button
                    :link="true"
                    type="primary"
                    icon="Delete"
                    size="default"
                    @click="delItem(n.styles, i1)"
                  ></el-button>
                </td>
              </tr>
            </table>
          </td>

          <td>
            <div class="actions">
              <el-button
                :link="true"
                type="primary"
                icon="CopyDocument"
                size="default"
                :title="$demoi18n('word.duplicate')"
                @click="copyItem(extStyles, i)"
              ></el-button>
              <el-button
                class="delete"
                :link="true"
                type="primary"
                icon="Delete"
                size="default"
                :title="$demoi18n('btn.delete')"
                @click="delItem(extStyles, i)"
              ></el-button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import * as Options from '@/components/common/options/options.js';
import { generateRules, getCssPathRules } from '@/utils/rules.js';
import CssStyleEditorItem from '@/components/common/css-style-editor/css-style-editor-item.vue';
import Helptip from '@/components/common/helptip/helptip.vue';
import cssDefault from '@/components/common/css-style-editor/cssDefault.js';
import { camelCase, clone } from '@/utils/util.js';
import NodePicker from '@/components/common/node-picker/node-picker.vue';

const extStylesItem = {
  switch: true,
  condition: '',
  extStyleOption: '',
  elSelector: '',
  styles: [],
};

export default {
  components: { ValueInputer, CssStyleEditorItem, Helptip, NodePicker },
  props: {
    widgetInstanceId: String,
    config: Object,
    extStyles: {
      type: Array,
      default: () => [],
    },
    extStyleOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    cssDefault;

    return {
      extStyleOption: '',
      type: '',
      fontWeightOptions: Options.fontWeightOptions,
      fontFamilyOptions: Options.fontFamilyOptions,
      rules: generateRules({ required: true, max: 1000, reg: /[<&"'()]/ }),
    };
  },
  computed: {
    extStyleOptions_() {
      const options = [
        ...this.extStyleOptions,
        { label: this.$demoi18n('panelData.option.custom'), value: 'diy' },
      ];
      return options;
    },
    typeOptions() {
      const options = [];

      // 代码检视：修改map为foreach
      Object.entries(cssDefault).map(([key, val]) => {
        if (!val.isDiy) {
          const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase(); // 驼峰转小写 fontSize => font-size
          options.push({
            label: `${val.label} ( ${cssKey} )`,
            value: key,
          });
        }
      });
      return options;
    },
  },
  mounted() {
    this.hideOtherPoppers();
  },
  methods: {
    camelCase,
    getCssPathRules,
    addStylesItem() {
      const item = clone(extStylesItem);
      item._randKey = Date.now();
      item.extStyleOption = this.extStyleOptions?.[0]?.value || 'diy';
      this.extStyles.push(item);
    },
    addStyle(stylesItem) {
      const item = { type: 'color', value: '#000', _randKey: Date.now() };
      stylesItem.styles.push(item);
    },
    delItem(items, index) {
      items.splice(index, 1);
    },
    copyItem(items, index) {
      const item = clone(items[index]);
      item._randKey = Date.now();
      items.splice(index + 1, 0, item);
    },
    handleSelectEl({ el, cssPath }, n) {
      n.elSelector = cssPath;
      this.hideOtherPoppers();
    },
    hideOtherPoppers() {
      document.querySelectorAll('.el-popper').forEach((n, i) => {
        n.style.display = 'none';
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ext-style-setting-main {
  table {
    border-collapse: collapse;
    th,
    td {
      text-align: center;
    }
    th {
      font-weight: normal;
    }
  }
  .main_table {
    width: 100%;
    > tr > td {
      padding: 10px;
    }
  }
  .selector_box{
    display: flex;
    align-items: center;
  }
  .selector_input{
    margin-top: 10px;
  }
  .switch_box{
    display: flex;
  }
  .actions{
    display: flex;
    .delete{
      margin-left: 5px;
    }
  }
  .configurableItems_table {
    th,
    td {
      border: none;
    }
    th {
      background-color: transparent;
    }
    .enabled_switch {
      margin-left: 10px;
    }
  }
  .configuringSubitems_table {
    th {
      background-color: transparent;
    }
    td {
      padding: 10px;
    }
  }

  :deep(.el-input__inner) {
    padding: 0 5px;
  }
  &.visualComponents_theme_light {
    .main_table {
      thead {
        position: sticky;
        top: 0;
        z-index: 1;
      }
      thead > tr > th,
      tbody > tr > td {
        border: 1px solid #888;
      }
      thead > tr > th {
        background-color: #d9ecff;
      }
    }
    // 检视意见，合并样式
    .configuringSubitems_table {
      > tr > th,
      > tr > td {
        border: 1px solid #dedede;
      }
    }
  }

  &.visualComponents_theme_dark {
    .main_table {
      thead > tr > th,
      tbody > tr > td {
        border: 1px solid #588ba8;
      }
      thead > tr > th {
        background-color: #225a89;
      }
    }
    .configuringSubitems_table {
      > tr > th,
      > tr > td {
        border: 1px solid #064559;
      }
    }
  }
}

</style>
